<template>
  <div class="h-full p-4">
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '编辑',
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '删除',
                onClick: handleDelete.bind(null, record),
                ifShow: userStore.getUserInfo.avatar === '管理员',
              },
            ]"
          />
        </template>
      </template>
      <template #toolbar>
        <div class="flex">
          <a-button
            type="primary"
            class="flex items-center"
            @click="
              openDrawer(true, {
                title: '添加',
              })
            "
          >
            <PlusOutlined />
            添加
          </a-button>
        </div>
      </template>
    </BasicTable>
    <DrawerForm @register="register" @next="handleComplete" />
  </div>
</template>
<script lang="ts" setup>
  // import { PlusOutlined } from '@ant-design/icons-vue';
  import { useRoute } from 'vue-router';

  import { getDeleteSources, getSearchSources } from '@/api/page/manage_account';
  import { useDrawer } from '@/components/Drawer';
  import { BasicTable, TableAction, useTable } from '@/components/Table';
  import { useMessage } from '@/hooks/web/useMessage';

  import DrawerForm from './component/DrawerForm.vue';
  import { getBasicColumns, getFormConfig } from './data';
  import { useUserStore } from '@/store/modules/user';
  
  const userStore = useUserStore();
  const route = useRoute();
  const { createConfirm, createMessage } = useMessage();
  async function apiList(params) {
    const data = route.query.id ? { customerManagentId: route.query.id } : {};
    const res = await getSearchSources({ ...params, page: 0, ...data });
    if (res.code === 1000) {
      return res.obj;
    }
    return [];
  }
  const [registerTable, { setTableData }] = useTable({
    // dataSource: [],
    columns: getBasicColumns(),
    // canResize: true,
    api: apiList,
    useSearchForm: false,
    formConfig: getFormConfig(),
    showTableSetting: true,
    showIndexColumn: false,
    rowSelection: {
      type: 'checkbox',
    },
    actionColumn: {
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
    },
  });

  const [register, { openDrawer }] = useDrawer();

  function handleEdit(record) {
    openDrawer(true, {
      title: '编辑',
      record,
    });
  }

  function handleDelete(record) {
    createConfirm({
      iconType: 'info',
      title: () => '删除提醒',
      content: () => '确定要删除该条内容吗？',
      onOk: () => {
        getDeleteSources({id:record.id}).then((res) => {
          if (res.code === 1000) {
            createMessage.success('删除成功！');
            handleGetSearchSources();
          } else {
            createMessage.error('删除失败，请重试！');
          }
        });
      },
    });
  }

  function handleGetSearchSources() {
    getSearchSources({ page: 0 }).then((res) => {
      if (res.code === 1000) {
        setTableData(res.obj);
      }
    });
  }

  function handleComplete() {
    handleGetSearchSources();
  }
</script>
<style></style>
